<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  css3新增了一些属性 像flex 这是css3中很重要的改变 所以除了flex以外的垂直水平居中的技巧都是属于css2的

  - css2的水平居中技巧
    将元素display改为行元素 再text-align: center 即可
    或者
    将块级元素定义一个宽度 再margin: 0 auto 即可

  - css3的水平居中技巧
    将元素display设为flex 再通过justify-content: center 实现居中

  - css2的垂直居中技巧
    单行内容的垂直居中可以通过设置相同height值和line-height值来实现
    多行内容的垂直居中且高度可变可以通过设置上下相同的padding值来实现
    行级盒子 小图标和标题对齐设置vertical-align: middle
    绝对定位 top: 50% left: 50% 的方法 需要已知块级的宽高

  - css3的垂直居中技巧
    将元素display设为flex 再通过align-items: center 来实现
</body>
</html>